<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Catamaran:wght@100..900&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/09681efc7e.js" crossorigin="anonymous"></script>
    <title>Phono - Headphones of the future</title>
</head>
<body>
    <nav class="navbar">
        <div class="container">
            <h1 class="logo">Phono</h1>
                <ul class="nav">
                    <li><a href="#home">Home</a></li>
                    <li><a href="#about">About</a></li>
                </ul>
            
        </div>
    </nav>
    <!--Section-->
    <section class="section-a">
        <div class="container">
            <div>
                <h1>The headphones of the future</h1>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore officiis nihil, corrupti qui fuga quis architecto quasi id in minima.</p>
                <a href="#" class="btn">Read more</a>
            </div>
            <img src="headphones.jpg" alt="">
        </div>
    </section>

    <!--Overlay Text-->

    <section class="section-b">
        <div class="overlay">
            <div class="section-b-inner">
                <h3>Loud & Clear</h3>
                <h2>People Aren't Hearing All The Music</h2>
                <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Recusandae harum dolores omnis soluta est autem velit commodi quia libero laborum.</p>
            </div>
        </div>
    </section>

    <!--Gallery-->
    <section class="section-c">
        <div class="gallery">
            <a href=""><img src="hp2.jpg" alt=""></a>
            <a href=""><img src="hp6.jpg"  alt=""></a>
            <a href=""><img src="hp3.jpg" alt=""></a>
            <a href=""><img src="hp4.jpg"  alt=""></a>
            <a href=""><img src="hp5.jpg"  alt=""></a>
           <a href=""> <img src="hp1.jpg"  alt=""></a>
        </div>
    </section>

        <!--Footer-->
    <footer class="section-footer">
        <div class="container">
            <div>
                <h2>Lorem ipsum dolor sit.</h2>
                <a href=""><i class="fa-brands fa-twitter fa-2x"></i></a>
                <a href="https://github.com/KristinaBorovskikh"><i class="fa-brands fa-github fa-2x"></i></a>
                <a href=""><i class="fa-brands fa-facebook fa-2x"></i></a>
            </div>
            <div>
                <h3>Company Info</h3>
                <ul>
                    <li><a href="#"> All Products</a></li>
                    <li><a href="#"> About Us</a></li>
                    <li><a href="#"> Privasy Policy</a></li>
                    <li><a href="#">Terms of Service</a></li>
                </ul>
            </div>
            <div>
                <h3>Blog Posts</h3>
                <ul>
                <li><a href="#"> Lorem, ipsum dolor.</a></li>
                <li><a href="#"> Lorem, ipsum dolor.</a></li>
                <li><a href="#"> Lorem, ipsum dolor.</a></li>
                <li><a href="#">Lorem, ipsum dolor.</a></li>
            </ul>
            </div>
            <div>
                <h3>Subscribe</h3>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                <form name="email-form" method="POST" data-netlify="true">
                    <div class="email-form">
                        <span class="form-control-wrap">
                            <input 
                            type="email" 
                            name="email"
                            id="email" 
                            size="40" 
                            class="form-control"
                            placeholder="Email"/>
                        </span>
                        <button type="submit" class="form-control submit">
                            <i class="fa-solid fa-chevron-right"></i>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </footer>

</body>
</html>